<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>源辰-浏览管理员信息</title>
<link rel="shortcut icon" href="../../images/yc.png" type="image/x-icon" />
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/main.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
	<div id="app">
		<div class="mt10">
			<div class="box">
				<div class="box_border">
					<div class="box_center">
						<form id="myform">
							姓名：<input type="text" id="mname" class="input-text lh30"
								size="40" />&nbsp;&nbsp; 手机号码：<input type="tel" id="tel"
								class="input-text lh30" size="40" />&nbsp;&nbsp; <input
								type="button" name="button" class="btn btn82 btn_search"
								onclick="searchMember()" value="查询" />&nbsp;&nbsp;
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="table" class="mt10">
			<div class="box span10 oh">
				<table width="100%" border="0" cellpadding="0" cellspacing="0"
					class="list_table">
					<thead>
						<tr>
							<th width="80">订单编号</th>
							<th width="100">用户id</th>
							<th width="100">下单时间</th>
							<th width="120">用户名称</th>
							<th width="200">用户电话</th>
							<th width="120">地址</th>
							<th width="120">详细地址</th>
							<th width="120">商品总价</th>
						</tr>
					</thead>
					<tbody id="order_info" align="center">
						<tr v-for="item in paginatedData">
							<td>{{item.ono}}</td>
							<td>{{item.uid}}</td>
							<td>{{item.odate}}</td>
							<td>{{item.uname}}</td>
							<td>{{item.utel}}</td>
							<td>{{item.addre}}</td>
							<td>{{item.detailed}}</td>
							<td>{{item.totalprice}}元</td>
						</tr>
					</tbody>
				</table>
				<div class="pagination">
					<ul>
						<li class="first-child" @click="paginate(1)"
							:class="{ active: currentPage === 1 }"><a
							href="javascript:void(0)">首页</a></li>
						<li v-for="page in pages" :key="page" @click="paginate(page)"
							:class="{ active: currentPage === page }"><a
							href="javascript:void(0)">{{ page }}</a></li>
						<li class="last-child" @click="paginate(totalPages)"
							:class="{ active: currentPage === totalPages }"><a
							href="javascript:void(0)">末页</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/qs.js"></script>
	<script type="text/javascript" src="../js/axios.js"></script>
	<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
	let app = new Vue({
		el: '#app',
		data:{
			order:[],
			currentPage: 1,  
 			pageSize: 10,
		},
		
		computed: {  
		    paginatedData() {  
		      const start = (this.currentPage - 1) * this.pageSize;  
		      const end = start + this.pageSize;  
		      return this.order.slice(start, end);  
		    },  
		    totalPages() {  
		      return Math.ceil(this.order.length / this.pageSize);  
		    },  
		    pages() {  
		      const startPage = Math.max(1, this.currentPage - 2);  
		      const endPage = Math.min(this.totalPages, this.currentPage + 2);  
		      return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);  
		    },  
		  }, 
		
		methods:{
			// 查询订单信息
			selectAllOrder(){
				axios.get("../../order/selectallorder",{
					
				}).then(resp=>{
					if(resp.code == 500) return alert("失败");
						this.order = resp.data.data;
						console.info(this.userInfo);
				});
			},
			
		    paginate(page) {  
			      if (page >= 1 && page <= this.totalPages) {  
			        this.currentPage = page;  
			      }  
			    },
			
			// 解封
			openuser(uid){
				axios.get("../../member/openuser",{
					params:{
						uid
					}
				}).then(resp=>{
					if(resp.code == 500) return alert("失败");
				})
				this.getUserInfos();
			},
			
			//冻结
			closeuser(uid){
				axios.get("../../member/closeuser",{
					params:{
						uid
					}
				}).then(resp=>{
					if(resp.code == 500) return alert("失败");
				})
				this.getUserInfos();
			},
		},
			
		mounted(){
			this.selectAllOrder();
		}
	})
</script>
</body>
</html>